<template>
  <div class = "container">
    <div class = "header">
      <div class = "icon">
        <img src = "../../common/image/default.png" width = "30" height = "30">
      </div>
      <h1 class = "title">Music</h1>
      <div class="user">
        <i class="icon-mine" @click.stop="$router.push('/user')"></i>
      </div>
    </div>
    <tab></tab>
  </div>
</template>

<script>
    import Tab from "@/base/tab/Tab";

    export default {
        name: "MyHeader",
        components: {Tab}
    }
</script>

<style scoped lang = "stylus">
  @import "~common/stylus/variable"
  .container
    height 64px

    .header
      position relative
      margin-bottom 10px
      display flex
      align-items center
      justify-content center
      .icon
        margin-right 10px
      .title
        color $color-theme
        font-size $font-size-medium-x
      .user
        position absolute
        top 5px
        right 1rem
        .icon-mine
          color $color-theme
          font-size 1.3rem
</style>
